import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Card } from 'antd'
import _ from 'lodash'
import './style.scss'
import pinyin from 'tiny-pinyin'
import history from 'store/history'
import PubSub from 'pubsub-js'

const gridStyle = {
  width: '33.33%',
  //textAlign: 'center',
}
const pinyinColor = ['#00adf7', '#f60', '#7b50b8', '#bf0a2c', '#001020', '#52c41a', '#eb2f96']

export default class QuickStart extends PureComponent {

  static propTypes = {
    data: PropTypes.array,
    loading: PropTypes.bool
  }

  static defaultProps = {
    data: null,
    loading: false
  }

  render () {
    const { data, loading } = this.props
    return (
      <Card 
        title="快速开始 / 便捷导航" 
        bodyStyle={{ padding: 0, minHeight: 300,  }} 
        loading={loading}
        extra={(<a onClick={() => PubSub.publish('OPEN_MODAL', ['QuickStartModal', {  }])}>编辑</a>)}
        >
        {data && data.map((item, i) => {
          if (i >= 6) return
          let itemInfo = getRouteInfo(item)
          return (
            <Card.Grid 
              className="common-menu-item" 
              style={gridStyle} 
              key={i}
              >
              <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
                <span className="pinyin-icon" style={{ backgroundColor: pinyinColor[i] }}>{itemInfo.pinyin}</span>
                <a style={{ marginLeft: 14 }} onClick={() => history.push(item)}>{itemInfo.name}</a>
              </div>
              <div className="meta-description">
                {itemInfo.description || ''}
              </div>
              <div style={{ color: 'rgba(0,0,0,.45)', fontSize: 12, marginTop: 8 }}>
                <span>{itemInfo.tagName}</span>
              </div>
            </Card.Grid>
          )
        })}
      </Card>
    )
  }
}

const getRouteInfo = (name, Router = window.Routes) => {
  let info = null
  let router = _.find(Routes, o => new RegExp(`^(${o.path})`).test(name) && o.path !== '/')
  let { childRoutes } = router
  info = _.find(childRoutes, o => `${router.path}/${o.path}` === name)
  return { ...info, tagName: router.name, pinyin: String(pinyin.convertToPinyin(info.name).charAt(0)).toUpperCase() }
}